<!--
author:        yangmingchao <amustlang_yang@foxmail.com>
date:          2024-01-10 21:56:27
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
    <div>
        <el-input v-if="type == 'input'" v-model="value" placeholder="">
            <template #append>
                <el-button @click="clickEv">
                    <el-icon>
                        <Edit />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
        <div v-if="type == 'image'" class="imageStyle">
            <div v-if="value">
                <BppendixPreview :id="value" :displayMode="props.queryType == '图片' ? 2 : 1" />
            </div>

            <div v-else style="width: 150px;height: 50px;text-align: center;color: #c0c4cc;line-height: 50px;">暂无数据</div>
            <el-button @click="clickEv">
                <el-icon>
                    <Edit />
                </el-icon>
            </el-button>
        </div>
        <div v-if="type == 'button'" style="margin-left: 10px;margin-right: 10px;">
            <el-button type="primary" icon="plus" @click="clickEv">
                {{ props.buttonTitle }}
            </el-button>
        </div>
        <el-icon v-if="type == 'icon'" @click="clickEv">
            <Edit />
        </el-icon>
        <el-dialog title="附件选择" v-model="open" width="1000px" append-to-body>
            <List v-if="open" :showSearchProps="false" ref="fileList" :type="props.queryType" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import List from './list'
// import { isImageType } from '@/utils/pageUtils'
import { computed, ref } from 'vue'

const props = defineProps(['modelValue', 'type', 'queryType', 'buttonTitle'])
const emit = defineEmits(['update:modelValue', 'callback'])

const { proxy } = getCurrentInstance();

const open = ref(false)

const value = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})

function clickEv() {
    open.value = true;
};
function submitForm() {
    let { ids, checkRows } = proxy.$refs['fileList'];
    if (ids.length != 1 && props.type !== 'button') {
        proxy.$modal.msgWarning("请至少选择一条数据");
        return
    }
    if (props.type === 'button') {
        emit('callback', ids, checkRows)
    } else {
        value.value = ids[0];
    }

    cancel();
}
function cancel() {
    open.value = false;
}
</script>

<style scoped>
.imageStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}
</style>